<template>
  <div class="search-page" :class="className">
    <div class="search-page-search" v-if="$slots.search">
      <h4 class="search-page-title" v-show="title">
        {{ title }}
      </h4>
      <div class="search-page-form">
        <slot name="search"></slot>
      </div>
    </div>
    <div class="search-page-tab" v-if="$slots.tab">
      <div class="search-page-form search-page-tab__bg">
        <slot name="tab"></slot>
      </div>
    </div>
    <div class="search-page-cnt search-page-cnt--other" v-if="$slots.other">
      <slot name="other"></slot>
    </div>
    <div
      class="layout-page-margin search-page-cnt"
      :class="{ 'search-page-cnt--search': $slots.search }"
      v-if="$slots.default"
    >
      <div class="search-page-prompt">
        <h4 class="search-page-h" v-show="promptTitle">
          {{ promptTitle }}
        </h4>
        <div class="right-btn-area" v-if="$slots.export">
          <slot name="export"></slot>
        </div>
        <div class="search-page-opt">
          <slot name="operate"></slot>
        </div>
      </div>
      <div class="search-page-table">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchLayout',
  props: {
    /**
     * 主标题
     */
    title: {
      type: String
    },

    /**
     * 结果页标题
     */
    promptTitle: {
      type: [String, Boolean],
      default: '查询结果'
    },

    className: {
      type: String
    }
  }
}
</script>

<style lang="less" scoped>
.search-page {
  position: relative;
  // search 布局
  .search-page-search {
    background-color: #fff;
    padding: 20px 40px 4px;
    box-shadow: 0px 2px 5px rgba(59, 59, 59, 0.03);

    .search-page-title {
      font-size: 18px;
      font-weight: normal;
      line-height: 1;
      margin-bottom: 30px;
    }
  }

  // tab 布局
  .search-page-tab {
    margin-bottom: @gap;
    .search-page-tab__bg {
      padding: 30px 30px 8px;
      background-color: #fff;
    }
  }

  // 结果页
  .search-page-cnt {
    padding: 27px 40px;
    background-color: #fff;
    box-shadow: 0px 2px 5px rgba(59, 59, 59, 0.06);
    min-height: 300px;

    &--search {
      margin-top: @gap;
    }

    &--other {
      margin: @gap;
      padding: 0;
    }

    .search-page-prompt {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin-bottom: @gap;
      position: relative;
    }

    .search-page-h {
      font-size: 18px;
      font-weight: normal;
      line-height: 36px;
    }

    .right-btn-area {
      position: absolute;
      top: 0;
      right: 0;
    }

    .search-page-opt {
      flex: 1;
      text-align: right;
    }
  }
}
</style>

<style lang="less">
@pageFontSize: 14px;

.search-page {
  .search-input-base {
    width: 70%;
    margin: 10px auto 30px auto;
  }

  .search-page-form {
    .search-form-inline {
      width: 100% !important;
      margin-right: 0 !important;
    }

    .ant-form-vertical {
      .ant-form-item {
        display: inline-block;
        vertical-align: text-bottom;
        margin-right: 20px;
        width: 280px;

        .ant-form-item-label {
          line-height: 20px;
          padding-bottom: 8px;

          & > label {
            font-size: @pageFontSize;
            color: #333;
          }
        }
        .ant-calendar-picker-input {
          width: 280px;
        }
        .ant-form-item-control-wrapper {
          .ant-input,
          .ant-cascader-picker-label,
          .ant-select-selection-selected-value {
            font-size: @pageFontSize;
            color: #777;
          }

          .ant-select-selection__placeholder {
            font-size: @pageFontSize;
          }

          .ant-calendar-range-picker-separator {
            line-height: 28px;
          }
        }

        .ant-checkbox-wrapper {
          font-size: 12px;
        }

        .ant-btn {
          min-width: 120px;
          margin-right: 12px;
        }
      }
    }
  }

  .search-page-prompt {
    .ant-btn {
      min-width: 120px;
    }
  }

  .search-page-table {
    .ant-table-column-title {
      font-size: @pageFontSize;
      color: #475262;
    }
  }
}
</style>
